<template>
  <div class="home-container">
    <t-list class="dataset-list">
      <template v-for="item in list" :key="item.id">
        <div @click="toMap(item.id)" class="plan-item">{{ item.name }}</div>
      </template>
    </t-list>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, Ref } from "vue";
import { getAllDataSet } from "@/services";
import { useRouter } from "vue-router";
const router = useRouter();

const list = ref<any[]>([]);

onMounted(() => {
  getAllDataSet().then((res) => {
    if (res.data.success) {
      list.value = res.data.data;
    }
  });
});

function toMap(id: string) {
  router.push({
    path: `map/${id}`,
  });
}
</script>

<style scoped lang="scss">
.home-container {
  height: 100%;
  width: 100%;
}

.plan-item {
  text-align: start;
  padding: 0.5rem;
}
.dataset-list {
  max-height: 90vh;
  overflow-y: auto;
}
</style>
